<template>
   <div class="person">
    <h2>一辆{{ car.brand }}车,价值{{ car.price }}</h2>
    <button @click="changePrice">修改汽车单价</button>
    <hr>
    <h2>游戏列表:</h2>
    <ul>
        <li v-for="item in games " :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏</button>
    <hr>
    <h2>测试:{{ obj.a.b.name }}</h2>
    <button @click="changeName">修改name</button>
   </div>
</template>

<script setup name="Person01" lang="ts">
    import { reactive } from 'vue'
    // 数据 
    let car = reactive({
        brand:'奔驰',
        price:100
    })
    let games = reactive(
        [
            {id:'klsfuhg01',name:'王者荣耀'},
            {id:'klsfuhg02',name:'原生'},
            {id:'klsfuhg03',name:'王者荣耀01'},
        ]
    )
    let obj = reactive(
        {
        a:{
            b:{
                name:'666'
            }
        }
    }
    )
    console.log(car)

    console.log(Proxy)

    // 方法
    function changePrice(){
        car.price += 10
    }
    function changeFirstGame(){
        games[0].name = '01'
    }
    function changeName(){
        obj.a.b.name = '888'
    }
</script>

<style>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button{
        margin : 0 10px;
    }
</style>